<template>
    <!-- 顶层部分 -->
    <div class="itemMusicTop">
        <!-- 背景 -->
        <img :src="playList.coverImgUrl" alt="" class="bgImg">
        <!-- 页面左边 -->
        <div class="itemMusicLeft">
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-fanhui1"></use>
            </svg>
            <span>歌单</span>
        </div>
        <!-- 页面右边 -->
        <div class="itemMusicRight">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo1"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao3"></use>
            </svg>
        </div>
    </div>
    <!-- 歌单内容部分 -->
    <div class="itemMusicContent">
        <!-- 歌单内容左边 -->
        <div class="itemMusicContentLeft">
            <img :src="playList.coverImgUrl" alt="">
            <div class="playCount">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-24gl-play"></use>
                </svg>
                <span>{{ changeCount(playList.playCount) }}</span>
            </div>
        </div>

        <!-- 歌单内容右边 -->
        <div class="itemMusicContentRight">
            <p>{{ playList.name }}</p>
            <div class="author">
                <img :src="playList.creator.avatarUrl" alt="">
                <span>{{ playList.creator.nickname }}</span>
            </div>
            <p>lool</p>

        </div>
    </div>

    <!-- 歌单底部部分 -->
    <div class="itemMusicMenu">
        <div class="gx">
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-message"></use>
            </svg>
            <p>{{ playList.commentCount }}</p>
        </div>
        <div class="gx">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-share"></use>
            </svg>
            <p>分享</p>
        </div>
        <div class="gx">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiazai"></use>
            </svg>
            <p>下载</p>
        </div>
        <div class="gx">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-duoxuan"></use>
            </svg>
            <p>多选</p>
        </div>
      
    </div>
</template>

<script>
export default {
    setup(props) {
        // 判断拿到的playList是否为空，若数据为空则在本地缓存sessionStorage当中获取数据,需要转换数据类型
        if ((props.playList.creator = "")) {

            props.playList.creator = JSON.parse(sessionStorage.getItem().playList).creator 
            // console.log("yes")
        }
        function changeCount(num) {
            if (num >= 100000000) {
                return (num / 10000000).toFixed(1) +"亿"
            } else if(num >= 10000){
                return (num / 10000).toFixed(1) + "万"
            }
        }

        return { changeCount }
    },
    
    props:['playList']
}

</script>

<style lang="less" scoped>
// 顶部部分
.itemMusicTop{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    

    .bgImg{
        width: 100%;
        // height: 30vh;
        position: absolute;
        z-index:-1;

        // 设置背景虚化
        filter: blur(20px);

    }
    
    .itemMusicLeft , .itemMusicRight{
        width: 30%;
        height: 5vh;
        margin-top: 2vh;
        display: flex;
        align-items: center;

        .icon{
            // width: 100%;
            height: 3vh;
            // 图标的填充颜色
            fill:#fff;
            
        }
        span{
            margin-left: 1vw;
            font-size: 6vw;
            color: #fff;
        }

    }

}

// 内容部分
.itemMusicContent{
    width: 100%;
    display: flex;
    margin-top: 3vh;

    // 内容部分左边
    .itemMusicContentLeft{
        width: 35%;
        height: 20vh;
        // border: 2px solid black;
        position: relative;
        margin-left: 1vw;
        border-radius: 3vw;
        background-color:rgba(253, 251, 251, 0.1);
        text-align: center;


        img{
            margin-top: 0.2vh;
            width: 98%;   
            // margin: 1vw;
            border-radius: 3vw;
        }
        .playCount{
            position: absolute;
            top: 0.6vh;
            right: 2vw;
            display: flex;
            align-items: center;
            .icon{
                width: 4vw;
                height: 4vw;
                fill:#fff;
            }
            span{
                font-size: 2vw;
                color: #fff;
            }
        }

       
    }

    // 内容部分右边
    .itemMusicContentRight{
        width: 64%;
        margin-left: 3vw;
        
        p:first-child{
            color: #fff;
            font-size: 5vw;
            
        }

        .author{
            height: 5vh;
            display: flex;
            align-items: center;

            img{
                width: 8vw;
                border-radius: 50%;
            }
            
            span{
                margin-left: 2vw;
                color: #3d3a3a;
                font-size: 4vw;
            }
        }
    }
}

// 菜单部分
.itemMusicMenu{
    width: 100%;
    display: flex;
    margin-top: 1vh;

    .gx{
        width: 25%;
        text-align: center;

        .icon{
            width: 8vw;
            fill: #fff;
        }

        p{
            color: #fff;
            font-size: 4vw;
        }
    }

  
}

</style>